<template>
  <!-- 投标审批 -->
  <div class="ruleForm">
    <el-form
      :model="ruleForm"
      size="mini"
      label-position="right"
      label-width="110px"
      :rules="rules"
      ref="ruleForm"
      :disabled="readonly"
    >
      <el-col :span="12">
        <el-form-item label="招标方式：" prop="tenderMethod">
          <el-radio-group v-model="ruleForm.tenderMethod">
            <el-radio :label="1">公开招标</el-radio>
            <el-radio :label="2">邀标</el-radio>
            <el-radio :label="3">议标</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报名平台：" prop="applicationPlatform">
          <el-input
            class="filter-item"
            v-model="ruleForm.applicationPlatform"
            placeholder="请输入报名平台"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报名日期：" prop="registrationDeadline">
          <el-date-picker
            v-model="ruleForm.registrationDeadline"
            type="datetime"
            align="right"
            unlink-panels
            placeholder="请选择"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开标日期：" prop="bidOpenDate">
          <el-date-picker
            v-model="ruleForm.bidOpenDate"
            type="datetime"
            align="right"
            unlink-panels
            placeholder="请选择"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="是否为合作投标项目："
          label-width="180px"
          prop="isBid"
        >
          <el-radio-group v-model="ruleForm.isBid">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="ruleForm.isBid === 1">
        <el-form-item label="合作方：" prop="partner">
          <el-input
            class="filter-item"
            v-model="ruleForm.partner"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="是否需要收费："
          label-width="140px"
          prop="isCharge"
        >
          <el-radio-group v-model="ruleForm.isCharge">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="ruleForm.isCharge === 1">
        <el-form-item label="金额：" prop="amount">
          <el-input
            type="number"
            class="filter-item"
            v-model="ruleForm.amount"
            placeholder="请输入"
          >
            <el-select v-model="ruleForm.units" slot="append" placeholder="请选择" style="width: 130px; padding: 0px 20px; margin: -5px -50px;">
              <el-option
                v-for="item in unitsList"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                </el-option>
              </el-select>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注：" prop="note">
          <el-input
            class="filter-item"
            v-model="ruleForm.note"
            placeholder="请输入"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    details: {
      type: Object,
      default: () => { }
    },
    // 查看详情为只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      unitsList: [
        {value: '0', label: '元'},
        {value: '1', label: '万元'},
        {value: '2', label: '亿元'}
      ],
      ruleForm: {},
      rules: {
        tenderMethod: [
          { required: true, message: '请选择招标方式', trigger: 'change' }
        ],
        applicationPlatform: [
          { required: true, message: '请输入报名平台', trigger: 'blur' }
        ],
        registrationDeadline: [
          { required: true, message: '请选择报名方式', trigger: 'change' }
        ],
        bidOpenDate: [
          { required: true, message: '请选择开标日期', trigger: 'change' }
        ],
        isBid: [
          { required: true, message: '请选择是否为合作投标项目', trigger: 'change' }
        ],
        partner: [
          { required: true, message: '请输入合作方', trigger: 'blur' }
        ],
        isCharge: [
          { required: true, message: '请选择是否需要收费：', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        note: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      }
    };
  },
  created () {
    this.init();
    // this.ruleForm.units = this.unitsList[0].label
  },
  methods: {
    init () {
      if (this.details) {
        console.log('子表单数据', this.details);
        this.$set(this, 'ruleForm', this.details);
      }
    },
    getFormData () {
      return new Promise((resolve, reject) => {
        this.$refs['ruleForm'].validate((valid) => {
          if (!valid) {
            return false;
          };
          resolve(this.ruleForm);
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
